<template>

  <div class="container  flex  flex-row" style="padding-bottom:40px;width:100%;">

    <div class="  flex flex-col" style="height:100%;flex:3">
      <div class="flex flex-1">
        <div class="title1">检测系统</div>
        <div class="flex flex-1">
          <el-card>
            <template #header>
              <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
              <span style="vertical-align: middle;">命令统计</span></template>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="commandstats" style="height: 420px" />
            </div>
          </el-card>
        </div>
      </div>
      <div class="flex flex-1">
        <div class="title1">检测系统</div>
        <div class="flex flex-1">   </div>
      </div>
    </div>
    <div class="  flex flex-col" style="height:100%;flex:5">

      <div class="  flex flex-row  f-j-b" style="height:60px;">
        <div class="title1">检测系统</div>
        <div class="  flex flex-row f-j-b" style="width:500px;" >
              <div class="title3  flex  justify-center align-center">检测中</div>
              <div class="title2  flex  justify-center align-center">停止检测</div>
              <div class="title2  flex  justify-center align-center">
                <router-link class="flex" :to="'/analysisLog'">查看结果</router-link>
              </div>
        </div>
      </div>
      <div class="flex flex-1">
        <img src="driver1.jpg" alt="摄像头1">
      </div>
      <div class="flex flex-1">
        <img src="driver2.jpg" alt="摄像头2">
      </div>
    </div>


  </div>


</template>

<script setup name="Index">
// @ is an alias to /src
import header from "@/components/layout/header";

import * as echarts from 'echarts';
const version = ref('4.8.2')

function goTarget(url) {
  window.open(url, '__blank')
}

const status = ref("1");
const status1 = ref("1");
const status2 = ref("1");

// function  handleSwitchChange(val) {
//   console.log(val); // val 为 true 或 false，表示开关的当前状态
//   status.value = val?0:1;
// }
/** 用户状态修改  */
function handleStatusChange(val) {
  console.log(val);
  status.value = val === "0" ? "0" : "1";

  // let text = row.status === "0" ? "启用" : "停用";
  // proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
  //   return changeUserStatus(row.userId, row.status);
  // }).then(() => {
  //   proxy.$modal.msgSuccess(text + "成功");
  // }).catch(function () {
  //   row.status = row.status === "0" ? "1" : "0";
  // });
};
/** 用户状态修改  */
function handleStatusChange1(val) {
  status1.value = val === "0" ? "0" : "1";
  // let text = row.status === "0" ? "启用" : "停用";
  // proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
  //   return changeUserStatus(row.userId, row.status);
  // }).then(() => {
  //   proxy.$modal.msgSuccess(text + "成功");
  // }).catch(function () {
  //   row.status = row.status === "0" ? "1" : "0";
  // });
};
/** 用户状态修改  */
function handleStatusChange2(val) {
  status2.value = val === "0" ? "0" : "1";
  // let text = row.status === "0" ? "启用" : "停用";
  // proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
  //   return changeUserStatus(row.userId, row.status);
  // }).then(() => {
  //   proxy.$modal.msgSuccess(text + "成功");
  // }).catch(function () {
  //   row.status = row.status === "0" ? "1" : "0";
  // });
};


</script>

<style scoped lang="scss">
* {
  color:#ffffff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #001432;
  color: #fff;
  font-family: "Microsoft YaHei", sans-serif;
}

.title1 {
  width:400px;height:30px;line-height: 30px;padding-left: 40px;
  background-image: url(/src/assets/images/slices/titlebg5.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
}


.title2 {
  width:150px;height:48px;line-height: 48px;
  background-image: url(/src/assets/images/slices/titlebg4.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
  text-align: center;
}

.title3 {
  width:150px;height:48px;line-height: 48px;
  background-image: url(/src/assets/images/slices/titlebg3.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
  text-align: center;
}



//.header {
//  text-align: center;
//  padding: 20px;
//  font-size: 24px;
//  background: linear-gradient(90deg, transparent, #0066cc, transparent);
//}

.container {
  display: flex;
  padding: 20px;
  gap: 20px;
}

.detection-area {
  flex: 1;
  display: flex;
  gap: 20px;
}

.camera-box {
  flex: 1;
  border: 2px solid #0066cc;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.camera-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.control-panel {
  //width: 500px;
  background: rgba(0, 102, 204, 0.1);
  border-radius: 10px;
  padding: 20px;
}

.detection-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
  border-radius: 5px;
}

.detection-item i {
  margin-right: 10px;
  color: #0066cc;
}

.toggle {
  margin-left: auto;
  width: 40px;
  height: 20px;
  background: #0066cc;
  border-radius: 10px;
  position: relative;
}


.status-output {
  margin-top: 20px;
  background: rgba(0, 20, 50, 0.8);
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #0066cc;
}

.status-output h3 {
  width:410px;height:30px;line-height: 30px;padding-left: 20px;
  background: url(/src/assets/images/slices/titlebg2.png) no-repeat center / cover;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
}

.status-list {
  height: 150px;
  overflow-y: auto;
  font-family: monospace;
}

.status-item {
  padding: 5px 0;
  color: #7cb8ff;
  font-size: 14px;
}

/* 自定义滚动条样式 */
.status-list::-webkit-scrollbar {
  width: 6px;
}

.status-list::-webkit-scrollbar-track {
  background: rgba(0, 102, 204, 0.1);
  border-radius: 3px;
}

.status-list::-webkit-scrollbar-thumb {
  background: #0066cc;
  border-radius: 3px;
}


.optionTitle {
  width:100%;height:60px;line-height: 60px;padding-left: 20px;
  background-image: url(/src/assets/images/slices/titlebg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
}

.btn {
  display: block;
  width: 100%;
  //padding: 15px;
  //margin: 10px 0;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.btn-start {
  background: #0066cc;
}

.btn-stop {
  background: #gold;
}


.btn-start {
  border-top:1px solid #409EFF;
  width:200px;height:50px;line-height: 50px;padding-left: 20px;
  background-image: url(/src/assets/images/slices/btn1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;


}
.btn-stop {
  border-top:1px solid #409EFF;
  width:200px;height:50px;line-height: 50px;padding-left: 20px;
  background-image: url(/src/assets/images/slices/btn2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;



}
</style>

